<template>
	<view>
		<view class="container">
			<view class="product-container" v-for="item in productList">
				<view class="product-title">{{item.title}}</view>
				<template v-if="item.imagesPath.length>1">
					<swiper :circular="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="imageItem in item.imagesPath">
							<image :src="imageItem" mode="">
							</image>
						</swiper-item>
					</swiper>
				</template>
				<template v-else v-for="imageItem in item.imagesPath">
					<view class="product-title">{{item.title}}</view>
					<image :src="imageItem" mode="">
					</image>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';


	const productList = ref([]);

	onMounted(() => {
		getFloors();
	})

	function getFloors() {
		uni.request({
			url: "http://nocat.life:3017/floors/query",
			method: "POST"
		}).then((res) => {
			if (res.data.code == 200) {
				productList.value = res.data.data.rows;
			}
		})
	}
</script>

<style scoped lang="scss">
	.container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10rpx 20rpx;
	}

	.product-container {
		// width: 100%;
		position: relative;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.product-container:first-child {
		grid-row-start: span 2;
	}

	.product-title {
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		padding: 5rpx 15rpx;
		background-color: #d86f32;
		border-radius: 8rpx;
		opacity: 0.63;
		z-index: 10;
		color: #fff;
	}
</style>